<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高分/低分电影高频词云图</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .card {
            margin-bottom: 30px;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
        }
        .wordcloud-container {
            max-width: 100%;
            overflow-x: auto; /* 长图滚动 */
            padding: 20px;
            background-color: white;
        }
        .page-title {
            color: #007BFF;
            margin: 30px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title">高分与低分电影观众讨论高频词云图</h1>

        <!-- 低分词云图 -->
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h3>低分电影高频词云图</h3>
            </div>
            <div class="card-body wordcloud-container">
                <img src="{{ low_wordcloud_path }}"
                     alt="低分电影高频词"
                     class="img-fluid"
                     style="max-width: 100%; height: auto;">
            </div>
        </div>

        <!-- 高分词云图 -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3>高分电影高频词云图</h3>
            </div>
            <div class="card-body wordcloud-container">
                <img src="{{ high_wordcloud_path }}"
                     alt="高分电影高频词"
                     class="img-fluid"
                     style="max-width: 100%; height: auto;">
            </div>
        </div>

        <!-- 返回按钮 -->
<!--        <div class="text-center mt-4">-->
<!--            <a href="{{ url_for('index') }}" class="btn btn-secondary">返回首页</a>-->
<!--        </div>-->
    </div>
</body>
</html>